<template>
    <div class="content">
        <!-- 头部组件 -->
        <header-nar></header-nar>

        <!-- 轮播图 -->
        <div class="banner">
            <div class="imgs">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                    <van-swipe-item v-for="(item,index) in imgs" :key="index">
                        <img :src="item.pic" />
                    </van-swipe-item>
                 </van-swipe>
            </div>
        </div>

        <!-- 搜索框 -->
        <router-link tag="div" class="search" to="./search">
            <span><svg t="1639482451793" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4266" width="13" height="13"><path d="M830.486464 796.124515 672.790943 638.42797c44.959904-52.799318 72.109099-121.232412 72.109099-196.016087 0-167.084182-135.448007-302.533214-302.53219-302.533214s-302.533214 135.449031-302.533214 302.533214 135.449031 302.53219 302.533214 302.53219c74.782651 0 143.215745-27.149196 196.017111-72.109099L796.101988 830.531518c9.499249 9.499249 24.885227 9.499249 34.384476 0S839.986737 805.623764 830.486464 796.124515zM442.366829 698.401131c-141.380814 0-255.989248-114.631985-255.989248-255.989248 0-141.403341 114.608434-255.989248 255.989248-255.989248 141.37979 0 255.989248 114.585907 255.989248 255.989248C698.356077 583.769146 583.747643 698.401131 442.366829 698.401131z" p-id="4267"></path></svg>星界使徒</span>
        </router-link>

        <div class="category">
            <router-link tag="div" to="./index/category" class="iconts">
                <div class="nav-icon fenlei">
                    <!-- <svg t="1640162927999" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="36075" width="30" height="30"><path d="M575.68 736a160.32 160.32 0 1 0 160.32-160.32H599.893333c-13.461333 0-24.192 10.752-24.192 24.192V736zM736 533.333333A202.666667 202.666667 0 1 1 533.333333 736V599.893333A66.432 66.432 0 0 1 599.872 533.333333H736zM490.666667 736a202.666667 202.666667 0 1 1-202.666667-202.666667h136.128A66.432 66.432 0 0 1 490.666667 599.872V736z m-202.666667-160.32a160.32 160.32 0 1 0 160.32 160.32V599.893333c0-13.44-10.730667-24.192-24.192-24.192H288zM533.333333 287.978667A202.666667 202.666667 0 1 1 736 490.666667H599.893333A66.432 66.432 0 0 1 533.333333 424.128V288z m202.666667 160.341333a160.32 160.32 0 1 0-160.32-160.32v136.128c0 13.44 10.730667 24.192 24.192 24.192H736zM448.32 288a160.32 160.32 0 1 0-160.32 160.32h136.128c13.461333 0 24.192-10.752 24.192-24.192V288zM288 490.666667A202.666667 202.666667 0 1 1 490.666667 288v136.128A66.432 66.432 0 0 1 424.128 490.666667H288z" p-id="36076" fill="#d81e06"></path></svg> -->
                    <img src="../assets/img/fenlei.png" alt="">
                </div>
                <span>分类</span>
            </router-link>
            <router-link tag="div" to="./index/rank" class="iconts">
                <div class="nav-icon paihang">
                    <!-- <svg t="1640162976343" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="36263" width="30" height="30"><path d="M869.6 963.2H153.6c-54.4 0-98.4-44-98.4-98.4V370.4c0-54.4 44-98.4 98.4-98.4h172.8V173.6c0-54.4 44-98.4 98.4-98.4h172.8c54.4 0 98.4 44 98.4 98.4v197.6h172.8c54.4 0 98.4 44 98.4 98.4v395.2c0.8 54.4-43.2 98.4-97.6 98.4z m-543.2-568c0-13.6-11.2-24.8-24.8-24.8H178.4c-13.6 0-24.8 11.2-24.8 24.8V840c0 13.6 11.2 24.8 24.8 24.8h123.2c13.6 0 24.8-11.2 24.8-24.8V395.2z m247.2-221.6H449.6c-13.6 0-24.8 11.2-24.8 24.8V840c0 13.6 11.2 24.8 24.8 24.8h123.2c13.6 0 24.8-11.2 24.8-24.8V197.6c0.8-13.6-10.4-24-24-24z m296 320.8c0-13.6-11.2-24.8-24.8-24.8H721.6c-13.6 0-24.8 11.2-24.8 24.8V840c0 13.6 11.2 24.8 24.8 24.8h123.2c13.6 0 24.8-11.2 24.8-24.8V494.4z" p-id="36264" fill="#d81e06"></path></svg> -->
                    <img src="../assets/img/paihang.png" alt="">    
                </div>
                <span>排行榜</span>
            </router-link>
            <router-link tag="div" to="./index/welfare" class="iconts">
                <div class="nav-icon fuli">
                    <!-- <svg t="1640163215174" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="54520" width="30" height="30"><path d="M974.504214 206.910467l-115.683742 0c6.593162-17.189498 10.027377-35.610032 10.027377-54.178947 0-40.296775-15.765055-78.219479-44.375673-106.776885-28.572756-28.590152-66.546625-44.337811-106.933451-44.337811-80.541361 0-146.028864 61.450561-177.87313 98.055247-9.757225 11.144828-19.153222 23.181979-27.687596 35.441187-8.505721-12.192693-17.882276-24.224728-27.627221-35.420721-31.912827-36.627199-97.469915-98.075713-177.906899-98.075713-83.422991 0-151.295821 67.789942-151.295821 151.114696 0 18.545378 3.439332 36.972053 10.037611 54.178947l-115.675556 0c-26.755364 0-48.521087 21.74935-48.521087 48.476061l0 153.982c0 26.727735 21.765723 48.471968 48.521087 48.471968l2.854001 0 0 464.707904c0 55.04671 44.825928 99.834776 99.918687 99.834776l719.418027 0c55.094806 0 99.920734-44.788066 99.920734-99.834776l0-464.707904 2.883677 0c26.748201 0 48.50676-21.744233 48.50676-48.471968l0-153.982C1023.010975 228.659817 1001.252415 206.910467 974.504214 206.910467zM547.118334 275.535427l0 682.031535-70.205968 0 0-682.031535L547.118334 275.535427zM412.083871 457.780121l0 499.785817-259.802094 0c-19.354813 0-35.102473-15.709797-35.102473-35.018561l0-464.736557L412.083871 457.780121zM611.897709 271.499507l123.646088 0-0.163729 0.207731 222.818785 0 0 121.355929-346.301144 0L611.897709 271.499507zM717.538725 66.416666c47.701418 0 86.511329 38.721907 86.511329 86.314855 0 18.84009-5.976108 36.726459-17.278525 51.724035l-1.853208 2.454912-240.942561 0 4.701069-8.445346c10.664897-19.168572 24.445762-38.609343 39.879266-56.256258C645.892965 76.263941 693.978123 66.416666 717.538725 66.416666zM306.442856 66.416666c23.502273 0 71.5158 9.847276 129.018445 75.779917 15.517415 17.832134 29.29828 37.289278 39.856753 56.268538l4.696975 8.445346L239.084749 206.910467l-1.824555-2.439562c-11.325953-15.015995-17.312294-32.907481-17.312294-51.740408C219.947899 105.138572 258.749624 66.416666 306.442856 66.416666zM289.30657 271.499507l122.776278 0 0 121.154337-335.950402 0.375553-10.333346 0L65.7991 271.691889l223.666082 0L289.30657 271.499507zM871.699804 957.566962l-259.802094 0 0-499.726465 294.904567 0 0 464.707904C906.802276 941.857165 891.056664 957.566962 871.699804 957.566962z" p-id="54521" fill="#d81e06"></path></svg> -->
                    <img src="../assets/img/fuli3.png" class="fuli" alt="">
                </div>
                <span>福利</span>
            </router-link>
            <router-link tag="div" to="./index/newbook" class="iconts">
                <div class="nav-icon xinshu">
                    <!-- <svg t="1640163281402" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="57833" width="30" height="30"><path d="M656.290909 958.836364H153.6V209.454545h712.145455v749.381819h-209.454546zM153.6 107.054545c0-23.272727 18.618182-41.890909 41.890909-41.890909h516.654546v83.781819H195.490909c-23.272727-4.654545-41.890909-23.272727-41.890909-41.89091z m716.8 37.236364h-93.090909V65.163636c0-37.236364-27.927273-65.163636-60.509091-65.163636h-558.545455C121.018182 0 93.090909 27.927273 93.090909 65.163636V958.836364c0 37.236364 27.927273 65.163636 60.509091 65.163636h712.145455c32.581818 0 60.509091-27.927273 60.50909-65.163636V209.454545c4.654545-32.581818-23.272727-65.163636-55.854545-65.163636z" fill="#d81e06" p-id="57834"></path><path d="M702.836364 409.6H321.163636c-18.618182 0-32.581818 13.963636-32.581818 32.581818 0 18.618182 13.963636 32.581818 32.581818 32.581818H698.181818c18.618182 0 32.581818-13.963636 32.581818-32.581818 0-18.618182-13.963636-32.581818-27.927272-32.581818m-167.563637 139.636364H321.163636c-18.618182 0-32.581818 13.963636-32.581818 32.581818 0 18.618182 13.963636 32.581818 32.581818 32.581818h214.109091c18.618182 0 32.581818-13.963636 32.581818-32.581818 0-18.618182-13.963636-32.581818-32.581818-32.581818" fill="#d81e06" p-id="57835"></path></svg> -->
                    <img src="../assets/img/xinshu.png" alt="">
                </div>
                <span>新书</span>
            </router-link>
            <router-link tag="div" to="./index/endbook" class="iconts">
                <div class="nav-icon wanben">
                    <!-- <svg t="1640163370352" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="61194" width="30" height="30"><path d="M678.829048 820.924729H274.916517c-21.212462 0-38.435425-17.222963-38.435425-38.435425s17.222963-38.435425 38.435425-38.435425H678.829048c21.212462 0 38.435425 17.222963 38.435425 38.435425s-17.222963 38.435425-38.435425 38.435425z" fill="#d81e06" p-id="61195"></path><path d="M631.636184 148.012876c27.439974 0 49.771443 22.331468 49.771443 49.771443v348.837971c0 48.688926-39.615247 88.304173-88.304173 88.304173H227.334434c-13.719987 0-26.783166 2.919146-38.581382 8.161446V197.784319c0-27.439974 22.331468-49.771443 49.771443-49.771443H631.636184m0-66.897101H238.524495c-64.415826 0-116.668543 52.252717-116.668544 116.668544v640.071458c0 58.382924 47.387473 105.770398 105.770398 105.770397h512.893988c89.228569 0 161.623395-72.297521 161.623395-161.623395V152.634857c0.085142-21.285441-17.052679-38.484077-38.30163-38.484077-2.651558 0-5.363931 0.267588-8.112794 0.827091-18.001402 3.60028-30.456425 20.336719-30.456426 38.630035v628.394873c0 46.706339-37.851596 84.65524-84.65524 84.65524H227.723654c-15.957999 0-28.802243-12.941548-28.802243-28.802242v-107.61919c0-15.666085 12.746938-28.413023 28.413023-28.413023h365.76902c85.725594 0 155.201273-69.47568 155.201273-155.201274v-348.837971c0-64.415826-52.252717-116.668543-116.668543-116.668544z" fill="#d81e06" p-id="61196"></path></svg> -->
                    <img src="../assets/img/wanben.png" alt="">
                </div>
                <span>完本</span>
            </router-link>
        </div>


    <!-- 热门小说 -->
    <div class="autor-moduel">
            <div class="model-left">
                <div class="bookshelf"><svg t="1640157712985" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="32284" width="16" height="16"><path d="M493.789998 1023.53089C254.799718 1023.53089 85.536259 856.015932 85.536259 625.384341c0-122.523033 72.584129-254.513561 75.782607-259.92965a32.11272 32.11272 0 0 1 31.728902-16.162976c12.879205 1.705855 23.156981 11.088057 26.69663 23.540799 0.255878 0.682342 19.87321 74.887033 45.631621 115.955491 17.271782 27.720143 34.970027 47.16689 54.80059 60.81373-13.433608-58.724057-23.626091-147.129991-6.951359-237.668243C358.771578 63.305131 552.514055 3.642853 560.787452 1.21201a31.814195 31.814195 0 0 1 39.831713 36.93176c-0.213232 1.705855-32.325952 175.95894 35.481784 324.410968 6.183724 13.518901 14.712999 29.084827 23.967262 44.906632a422.199104 422.199104 0 0 1 13.135083-66.698929c24.990775-88.022116 89.344154-118.130456 92.116168-119.281909a31.64361 31.64361 0 0 1 32.496537 4.008759c9.382202 7.249884 13.732132 19.276161 11.64246 31.046561-0.341171 2.217611-9.382202 62.178413 41.196398 147.12999 45.674267 76.678181 58.681411 126.403853 58.68141 221.931731C909.123036 856.143872 734.614073 1023.53089 493.789998 1023.53089zM187.247861 475.269104a407.699336 407.699336 0 0 0-28.10396 147.129991c0 187.814632 138.43013 324.069797 334.774036 324.069797 197.879176 0 341.469517-136.255165 341.469518-324.112443 0-81.198696-9.936605-118.684859-48.275696-183.294116-25.587824-43.072838-38.381737-81.795746-44.181643-112.714367a144.272684 144.272684 0 0 0-15.864451 36.803821c-18.721758 66.10188-13.902718 143.718281-13.902718 144.571208a31.259792 31.259792 0 0 1-20.47026 31.259792 30.278926 30.278926 0 0 1-35.225905-11.301289c-2.430843-3.241124-56.975556-81.454575-81.028111-134.336078-49.896258-109.217364-49.213916-227.475759-44.181643-295.539373-50.5786 29.767169-128.408232 96.423452-153.526947 231.868336-24.308433 131.990528 22.943749 269.951548 23.412859 271.23094a31.430378 31.430378 0 0 1-5.586675 31.728902 30.278926 30.278926 0 0 1-30.278925 9.723373c-3.752881-0.93822-96.551391-23.668738-152.460788-112.970245a376.951301 376.951301 0 0 1-26.568691-54.118249z" fill="#3D3D3D" p-id="32285"></path></svg></div>
                <div class="text">热门小说</div>    
            </div> 
            <div class="model-right">
                <div class="text"></div>   
                <div class="next"><svg t="1639565818740" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6724" width="12" height="12"><path d="M674.133333 533.333333L341.333333 200.533333l29.866667-29.866666 362.666667 362.666666L371.2 896l-29.866667-29.866667 332.8-332.8z" fill="#444444" p-id="6725"></path></svg></div> 
            </div>   
    </div>
   

    <!-- 热门小说2 -->
    <div class="nav-book-hot-ol" v-if="hotnovellist">
        <ol class="nav-ol">
            <li v-for="(item,index) in hotnovellist" :key="index" v-show="index<4" @click="bookClick(item.id)">
                <img :src="item.cover" alt="">
                <div class="book-cell">
                    <span>{{item.title}}</span>
                    <p>{{item.author}}</p>
                </div>
            </li>
        </ol>
    </div>



   <!-- 一品红文 -->
        <div class="model-header">
            <div class="model-left">
                <div class="bookshelf"><svg t="1639565674326" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3824" width="16" height="16"><path d="M1024 128a128 128 0 0 0 0 256v85.333333H213.333333A213.333333 213.333333 0 1 1 213.333333 42.666667h810.666667v85.333333zM213.333333 128a128 128 0 1 0 0 256h640a212.394667 212.394667 0 0 1-42.666666-128c0-48.042667 15.872-92.330667 42.666666-128H213.333333zM0 640v-85.333333h810.666667a213.333333 213.333333 0 0 1 0 426.666666H0v-85.333333a128 128 0 0 0 0-256z m810.666667 0H170.666667c26.794667 35.669333 42.666667 79.957333 42.666666 128a212.394667 212.394667 0 0 1-42.666666 128h640a128 128 0 0 0 0-256z" fill="#666666" p-id="3825"></path></svg></div>
                <div class="text">一品红文</div>    
            </div> 
            <div class="model-right">
                <div class="text">更多</div>   
                <div class="next"><svg t="1639565818740" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6724" width="12" height="12"><path d="M674.133333 533.333333L341.333333 200.533333l29.866667-29.866666 362.666667 362.666666L371.2 896l-29.866667-29.866667 332.8-332.8z" fill="#444444" p-id="6725"></path></svg></div> 
            </div>   
        </div>

        <!-- after -->
        <div class="model-tips">
            <span>每日甄选精品好文</span>
        </div>

        <!-- 一品红文 -->
        <div class="red-text" v-if="firstgradelist">
            <ol class="book-ol book-ol-normal">
                <li class="book-li" v-for="(item,index) in firstgradelist" :key="index" v-show="index>3" @click="bookClick(item.id)">
                    <div class="book-layout">
                        <img :src="item.entry.link[1].href" class="book-cover" alt="庆余年2天下太平">
                        <div class="book-cell">
                            <h4 class="book-title">{{item.entry.title}}</h4>
                            <p class="book-desc">{{item.entry.summary}}</p>
                            <div class="book-meta">
                                <div class="book-meta-l">
                                    <span class="book-author book-author-gray">{{item.entry.author.name}}</span>
                                </div>
                                <div class="book-meta-r">
                                    <span class="tag-small-group origin-right">
                                        <p class="tag-small lightgreen">玄幻</p>
                                        <p class="tag-small lightblue">连载中</p>
                                        <p class="tag-small smallblue">95.73万</p>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                
            </ol>
        </div>


        <!-- 主编推荐 -->
        <div class="autor-moduel">
            <div class="model-left">
                <div class="bookshelf"><svg t="1639616427881" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9667" width="16" height="16"><path d="M939.072 434.496C919.744 403.392 886.272 384 851.904 382.976L638.848 381.952c14.208-41.024 21.376-83.776 21.376-127.04 0-21.504-1.856-43.52-5.952-67.264l-3.968-17.152C638.976 121.344 595.84 86.912 545.28 86.912c-59.456 0-107.84 48.384-107.84 107.904 0 3.456 0.128 6.848 0.448 9.664C434.944 310.016 307.904 418.944 264.704 418.944c0 0 0 0-0.064 0L106.368 419.008c-20.672 0-37.504 16.896-37.504 37.568l-0.384 442.88c0 20.992 18.176 36.288 40.96 36.928l137.216-0.256 5.248 0.96 4.608-0.64 522.24 0.192c18.368-1.28 36.096-6.976 51.456-16.768 16.64-10.688 30.08-25.728 36.16-38.976l6.4-10.624c35.968-85.632 79.872-347.968 81.664-359.04l0.704-10.624C956.928 477.056 951.36 454.208 939.072 434.496zM132.864 483.328 218.24 483.2l0 389.312-85.696 0.256L132.864 483.328zM815.744 841.6l-4.032 6.4c-3.648 7.36-9.216 13.568-16 17.92-6.208 3.968-13.568 6.336-19.136 6.72L282.24 872.448 282.24 479.808C366.656 463.36 498.24 334.336 501.824 201.344L501.44 194.816c0-24.192 19.648-43.904 43.84-43.904 20.544 0 38.08 13.952 42.688 33.984l3.584 15.232c3.136 18.368 4.672 36.736 4.672 54.656 0 36.352-6.08 72.256-18.112 106.624L548.672 445.824l291.456 0.064 6.912 0.704c15.488 0.576 29.568 8.704 37.696 21.76 5.056 8.128 7.36 17.6 6.592 32.384C890.88 503.296 846.848 766.656 815.744 841.6z" p-id="9668"></path></svg></div>
                <div class="text">主编推荐</div>    
            </div> 
            <div class="model-right">
                <div class="text">更多</div>   
                <div class="next"><svg t="1639565818740" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6724" width="12" height="12"><path d="M674.133333 533.333333L341.333333 200.533333l29.866667-29.866666 362.666667 362.666666L371.2 896l-29.866667-29.866667 332.8-332.8z" fill="#444444" p-id="6725"></path></svg></div> 
            </div>   
        </div>
        
        <!-- 推荐after -->
        <div class="autor-model-recommend" v-if="hiefeditorlist">
            <ul>
                <li v-for="(item,index) in hiefeditorlist" :key="index" v-show="index<4" @click="bookClick(item.id)">
                    <img :src="item.cover" class="module-slide-img" alt="戏精夫妇今天离婚了吗">
                    <span>{{item.title}}</span>
                    <p>{{item.author}}</p>
                </li>
                
            </ul>
        </div>


        <!-- 排行榜 -->
        <div class="rank-model">
            <div class="model-left">
                <div class="bookshelf"><svg t="1639619935912" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12647" width="16" height="16"><path d="M869.6 963.2H153.6c-54.4 0-98.4-44-98.4-98.4V370.4c0-54.4 44-98.4 98.4-98.4h172.8V173.6c0-54.4 44-98.4 98.4-98.4h172.8c54.4 0 98.4 44 98.4 98.4v197.6h172.8c54.4 0 98.4 44 98.4 98.4v395.2c0.8 54.4-43.2 98.4-97.6 98.4z m-543.2-568c0-13.6-11.2-24.8-24.8-24.8H178.4c-13.6 0-24.8 11.2-24.8 24.8V840c0 13.6 11.2 24.8 24.8 24.8h123.2c13.6 0 24.8-11.2 24.8-24.8V395.2z m247.2-221.6H449.6c-13.6 0-24.8 11.2-24.8 24.8V840c0 13.6 11.2 24.8 24.8 24.8h123.2c13.6 0 24.8-11.2 24.8-24.8V197.6c0.8-13.6-10.4-24-24-24z m296 320.8c0-13.6-11.2-24.8-24.8-24.8H721.6c-13.6 0-24.8 11.2-24.8 24.8V840c0 13.6 11.2 24.8 24.8 24.8h123.2c13.6 0 24.8-11.2 24.8-24.8V494.4z" p-id="12648"></path></svg></div>
                <div class="text">排行榜</div>    
            </div> 
            <div class="model-right">
                <div class="text">更多</div>   
                <div class="next"><svg t="1639565818740" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6724" width="12" height="12"><path d="M674.133333 533.333333L341.333333 200.533333l29.866667-29.866666 362.666667 362.666666L371.2 896l-29.866667-29.866667 332.8-332.8z" fill="#444444" p-id="6725"></path></svg></div> 
            </div> 
        </div>

        <div class="module-rank-top">
            <span class="line"></span>
            <span class="text">热销榜</span>
            <span class="line"></span>
        </div>

        <!-- 热销榜 -->
        <div class="sell-hot-rank" v-if="topsellinglist">
            <ul>
                <li v-for="(item,index) in topsellinglist" :key="index" @click="bookClick(item.id)">
                    <img :src="item.cover" class="module-slide-img" alt="戏精夫妇今天离婚了吗">
                    <span>{{item.title}}</span>
                    <p>{{item.author}}</p>
                </li>
            </ul>
        </div>
        
        <div class="module-rank-top">
            <span class="line"></span>
            <span class="text">新书榜</span>
            <span class="line"></span>
        </div>

        <!-- 新书榜 -->
        <div class="new-book-rank" v-if="topnewbook">
            <ul>
                <li v-for="(item,index) in topnewbook" :key="index" v-show="index<4" @click="bookClick(item.id)">
                    <img :src="item.cover" class="module-slide-img" alt="戏精夫妇今天离婚了吗">
                    <span>{{item.title}}</span>
                    <p>{{item.author}}</p>
                </li>
                
            </ul>
        </div>

        <!-- 其它榜单 -->
        <!-- <div class="other-rank">
            <ul>
                <li>月票榜</li>
                <li>推荐榜</li>
                <li>礼物榜</li>
                <li>点击榜</li>
            </ul>
        </div> -->

        <!-- 免费读书 -->
        <div class="free-read-model">
            <div class="model-left">
                <div class="bookshelf"><svg t="1639637778585" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16528" width="16" height="16"><path d="M109 824.2v-40.9 16.2c0.8 13.8 12.2 24.7 26.2 24.7H109zM517.8 892.9l-37-21.2 12.7 7.3c12 6.9 36.8 7.3 48.6-0.3l-24.3 14.2zM593.7 115.2h40.9-16.2c-13.8 0.8-24.7 12.2-24.7 26.2v-26.2zM109 115.3h40.9-16.2c-13.8 0.8-24.7 12.2-24.7 26.2v-26.2zM906.9 824.4H866h16.2c13.8-0.8 24.7-12.2 24.7-26.2v26.2zM906.8 115.2v40.9-16.2c-0.8-13.8-12.2-24.7-26.2-24.7h26.2zM423.6 296.4c0-22.6-18.3-41-41-41h-88.1c-22.6 0-41 18.3-41 41 0 22.6 18.3 41 41 41h88.1c22.6-0.1 41-18.4 41-41zM423.6 479.4c0-22.6-18.3-41-41-41H274.5c-22.6 0-41 18.3-41 41 0 22.6 18.3 41 41 41h108.1c22.6-0.1 41-18.4 41-41zM423.6 662.4c0-22.6-18.3-41-41-41h-78.1c-22.6 0-41 18.3-41 41 0 22.6 18.3 41 41 41h78.1c22.6 0 41-18.4 41-41z" fill="#242424" p-id="16529"></path><path d="M920.6 33.7h-0.5v-0.1H866v-0.1H577.7c-35.8 1.2-64.5 30-65.7 65.8v601.3c0 22.6 18.3 41 41 41s41-18.3 41-41V115.4h312.5V824H646.3c-0.4 0-0.8 0-1.2 0.1h-0.6c-0.5 0-1.1 0.1-1.6 0.2h-0.1c-6.2 0.8-12 2.9-17.1 6.2l-107.9 62.3-107.9-62.3c-5-3.2-10.8-5.4-17.1-6.2h-0.1c-0.5-0.1-1.1-0.1-1.6-0.2h-0.6c-0.4 0-0.8 0-1.2-0.1H109.2V115.4h265.7l32.3 18.6c19.6 11.3 44.6 4.6 55.9-15 11.3-19.6 4.6-44.6-15-55.9l-38.1-22c-6.7-4.8-14.9-7.6-23.7-7.6H93c-36.5 1.3-65.7 31.2-65.7 68v740.4c1.9 33.6 28.1 60.8 61.4 63.9h288.1l111.8 64.6c18.2 8.7 39.5 8.8 57.8 0.4l112.6-65h267.9c32.7-3 58.7-29.1 61.6-61.8V95.1c-3.5-34.5-32.6-61.4-67.9-61.4z" fill="#242424" p-id="16530"></path></svg></div>
                <div class="text">免费读书</div>    
            </div> 
            <div class="model-right">
                <div class="text">更多</div>   
                <div class="next"><svg t="1639565818740" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6724" width="12" height="12"><path d="M674.133333 533.333333L341.333333 200.533333l29.866667-29.866666 362.666667 362.666666L371.2 896l-29.866667-29.866667 332.8-332.8z" fill="#444444" p-id="6725"></path></svg></div> 
            </div> 
        </div>

        <div class="autor-model-recommend" v-if="freebook">
            <ul>
                <li v-for="(item,index) in freebook" :key="index" v-show="index<4" @click="bookClick(item.id)">
                    <img :src="item.cover" class="module-slide-img" alt="戏精夫妇今天离婚了吗">
                    <span>{{item.title}}</span>
                    <p>{{item.author}}</p>
                </li>
                
            </ul>
        </div>


        <!-- 分类推荐 -->
        


        <!-- 新书抢先 -->
        <div class="free-read-model">
            <div class="model-left">
                <div class="bookshelf"><svg t="1639997180610" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="22686" width="16" height="16"><path d="M873.767394 852.441693" p-id="22687"></path><path d="M866.12739 781.116227c56.886615-74.840522 90.670046-168.198793 90.670046-269.455965 0-246.161423-199.552895-445.713294-445.714318-445.713294-246.160399 0-445.713294 199.550849-445.713294 445.713294s199.552895 445.714318 445.713294 445.714318c94.158497 0 181.492564-29.195949 253.451456-79.028914-0.151449-0.053212-0.292666-0.11768-0.444115-0.170892 7.29515-5.880941 11.969613-14.885012 11.969613-24.984021 0-17.714454-14.354939-32.06837-32.069393-32.06837-9.68457 0-18.361183 4.298909-24.24417 11.086499-0.01535-0.053212-0.038886-0.102331-0.053212-0.155543-59.877739 38.891775-131.319861 61.490469-208.039173 61.490469-211.220632 0-382.447389-171.228803-382.447389-382.452505 0-211.218586 171.22778-382.447389 382.447389-382.447389 211.218586 0 382.446365 171.228803 382.446365 382.447389 0 86.74669-28.884864 166.743652-77.553307 230.905974-6.588045 5.872754-10.741645 14.423501-10.741645 23.942295 0 17.709337 14.354939 32.069393 32.069393 32.069393 8.242731 0 15.760962-3.115967 21.444405-8.229428 0.005117 0.024559 0.01535 0.044002 0.01842 0.068562 0.083911-0.102331 0.160659-0.204661 0.24457-0.306992C862.201987 787.124058 864.423585 784.281313 866.12739 781.116227L866.12739 781.116227z" p-id="22688"></path><path d="M866.12739 781.116227" p-id="22689"></path><path d="M385.426233 584.432683l-25.818015 0 0-83.280752c0-30.098505-10.989285-45.148269-32.967856-45.148269-11.386328 0-20.744463 4.236488-28.069289 12.710486-7.327896 8.473999-10.989285 19.198248-10.989285 32.17377l0 83.545788-25.951045 0L261.630742 437.995519l25.951045 0 0 24.229844 0.530073 0c11.032264-18.447141 27.053146-27.672246 48.061622-27.672246 16.063861 0 28.288277 5.143137 36.675294 15.424294 8.383948 10.284227 12.577456 25.2685 12.577456 44.950771L385.426233 584.432683z" p-id="22690"></path><path d="M548.016285 517.834892 445.537286 517.834892c0.440022 15.623839 4.720511 27.694759 12.842493 36.211736 8.119935 8.520047 19.463284 12.775978 34.028001 12.775978 16.416901 0 31.464619-5.250584 45.148269-15.755846l0 23.170722c-12.887518 9.092076-29.968545 13.637602-51.238988 13.637602-21.184485 0-37.71395-6.706749-49.584302-20.125363-11.872399-13.416568-17.807574-32.041764-17.807574-55.874565 0-22.418592 6.508227-40.910759 19.529799-55.475476 13.018501-14.563694 29.194926-21.846564 48.52518-21.846564 19.152199 0 34.113959 6.157233 44.88528 18.469654 10.768251 12.313443 16.153912 29.547966 16.153912 51.703569L548.019355 517.834892zM522.064216 497.04745c-0.088004-13.240559-3.222391-23.478737-9.399067-30.717605-6.179746-7.236821-14.874779-10.857279-26.084075-10.857279-10.327206 0-19.264762 3.839445-26.811646 11.519358-7.546883 7.679913-12.292977 17.699104-14.233166 30.055526L522.064216 497.04745z" p-id="22691"></path><path d="M770.18527 437.995519l-43.692105 146.43614-27.009144 0-29.128411-102.743012c-1.237177-4.41352-2.032286-9.090029-2.38328-14.035668l-0.530073 0c-0.264013 3.708462-1.281179 8.29799-3.045359 13.769608l-31.510668 103.009072-26.216081 0-43.957141-146.43614 27.009144 0 29.261441 108.569718c0.88209 3.266393 1.543146 7.724938 1.986237 13.371542l1.059122 0c0.350994-4.853541 1.191128-9.44307 2.515287-13.769608l31.511691-108.171652 23.964808 0 30.717605 108.701724c0.881067 3.178389 1.588171 7.679913 2.118244 13.505595l1.192152 0c0.176009-3.883447 0.970094-8.384971 2.38328-13.505595l28.598338-108.701724L770.18527 437.995519z" p-id="22692"></path></svg></div>
                <div class="text">新书抢先</div>    
            </div> 
            <div class="model-right">
                <div class="text">更多</div>   
                <div class="next"><svg t="1639565818740" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6724" width="12" height="12"><path d="M674.133333 533.333333L341.333333 200.533333l29.866667-29.866666 362.666667 362.666666L371.2 896l-29.866667-29.866667 332.8-332.8z" fill="#444444" p-id="6725"></path></svg></div> 
            </div> 
        </div>

        <!-- 新书抢先after -->
        <div class="red-text" v-if="newbooklist">
            <ol class="book-ol book-ol-normal">
                <li class="book-li" v-for="(item,index) in newbooklist" :key="index" @click="bookClick(item.id)">
                    <div class="book-layout">
                        <img :src="item.cover" class="book-cover" alt="庆余年2天下太平">
                        <div class="book-cell">
                            <h4 class="book-title">{{item.title}}</h4>
                            <p class="book-desc">{{item.content}}</p>
                            <div class="book-meta">
                                <div class="book-meta-l">
                                    <span class="book-author book-author-gray">{{item.author}}</span>
                                </div>
                                <div class="book-meta-r">
                                    <span class="tag-small-group origin-right">
                                        <p class="tag-small lightgreen">{{item.category}}</p>
                                        <p class="tag-small lightblue">连载中</p>
                                        <p class="tag-small smallblue">95.73万</p>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ol>
        </div>


        <!-- 完本专区 -->
        <div class="free-read-model">
            <div class="model-left">
                <div class="bookshelf"><svg t="1639997712095" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25851" width="16" height="16"><path d="M213.333333 213.333333h640v640H213.333333V213.333333z m42.666667 42.666667v554.666667h554.666667V256H256z m85.333333 0h42.666667v554.666667H341.333333V256z" fill="#444444" p-id="25852"></path></svg></div>
                <div class="text">完本专区</div>    
            </div> 
            <div class="model-right">
                <div class="text">更多</div>   
                <div class="next"><svg t="1639565818740" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6724" width="12" height="12"><path d="M674.133333 533.333333L341.333333 200.533333l29.866667-29.866666 362.666667 362.666666L371.2 896l-29.866667-29.866667 332.8-332.8z" fill="#444444" p-id="6725"></path></svg></div> 
            </div> 
        </div>

        <!-- 完本专区after -->
        <div class="red-text" v-if="endbooklist">
            <ol class="book-ol book-ol-normal">
                <li class="book-li" v-for="(item,index) in endbooklist" :key="index" @click="bookClick(item.id)">
                    <div class="book-layout">
                        <img :src="item.cover" class="book-cover" alt="庆余年2天下太平">
                        <div class="book-cell">
                            <h4 class="book-title">{{item.title}}</h4>
                            <p class="book-desc">{{item.content}}</p>
                            <div class="book-meta">
                                <div class="book-meta-l">
                                    <span class="book-author book-author-gray">{{item.author}}</span>
                                </div>
                                <div class="book-meta-r">
                                    <span class="tag-small-group origin-right">
                                        <p class="tag-small lightgreen">{{item.category}}</p>
                                        <p class="tag-small lightblue">连载中</p>
                                        <p class="tag-small smallblue">95.73万</p>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ol>
        </div>

        <!-- 更新好书 -->
        <div class="free-read-model">
            <div class="model-left">
                <div class="bookshelf"><svg t="1639997883418" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28961" width="16" height="16"><path d="M70.997333 559.5136c0-0.273067 0-0.546133-0.136533-0.750933A431.3088 431.3088 0 0 1 68.266667 511.931733 444.2112 444.2112 0 0 1 512 68.266667a442.368 442.368 0 0 1 358.536533 183.773866h-149.9136l-4.096-0.2048a34.338133 34.338133 0 1 0 0 68.744534c1.365333 0 2.730667-0.136533 4.096-0.273067h191.010134l0.136533 0.341333s74.683733-0.2048 74.683733-0.341333h0.136534c-23.278933-65.536-68.334933-118.5792-68.334934-118.5792A510.088533 510.088533 0 0 0 512 0C229.717333 0 0 229.649067 0 511.931733c0 15.223467 0.8192 30.378667 2.2528 45.124267v2.4576a34.474667 34.474667 0 0 0 68.676267 0zM1023.112533 492.7488h-0.682666a34.474667 34.474667 0 0 0-68.744534 1.6384c0 3.6864 0.546133 7.3728 1.774934 10.717867 0.2048 2.321067 0.273067 4.573867 0.273066 6.894933a444.074667 444.074667 0 0 1-443.665066 443.5968 442.7776 442.7776 0 0 1-342.903467-163.157333h144.5888c1.365333 0.341333 2.798933 0.341333 4.164267 0.341333 1.365333 0 2.798933 0 4.096-0.273067h1.570133v-0.341333a34.269867 34.269867 0 0 0 0-67.7888v-0.136533h-1.706667a38.570667 38.570667 0 0 0-8.260266 0H50.312533s9.147733 43.349333 68.266667 113.664C213.333333 950.545067 353.553067 1024 512 1024 794.350933 1024 1024 794.350933 1024 512c0-6.5536-0.682667-12.834133-0.887467-19.2512z" p-id="28962"></path></svg></div>
                <div class="text">更新好书</div>    
            </div> 
            <div class="model-right">
                <div class="text">更多</div>   
                <div class="next"><svg t="1639565818740" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6724" width="12" height="12"><path d="M674.133333 533.333333L341.333333 200.533333l29.866667-29.866666 362.666667 362.666666L371.2 896l-29.866667-29.866667 332.8-332.8z" fill="#444444" p-id="6725"></path></svg></div> 
            </div> 
        </div>

        <div class="red-text" v-if="updatebook">
            <ol class="book-ol book-ol-normal">
                <li class="book-li" v-for="(item,index) in updatebook" :key="index" @click="bookClick(item.id)">
                    <div class="book-layout">
                        <img :src="item.cover" class="book-cover" alt="庆余年2天下太平">
                        <div class="book-cell">
                            <h4 class="book-title">{{item.title}}</h4>
                            <p class="book-desc">{{item.content}}</p>
                            <div class="book-meta">
                                <div class="book-meta-l">
                                    <span class="book-author book-author-gray">{{item.author}}</span>
                                </div>
                                <div class="book-meta-r">
                                    <span class="tag-small-group origin-right">
                                        <p class="tag-small lightgreen">{{item.category}}</p>
                                        <p class="tag-small lightblue">连载中</p>
                                        <p class="tag-small smallblue">95.73万</p>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ol>
        </div>

    </div>
</template>

<script>
import headerNar from "../components/base/headerNar.vue"
// import Swiper from "swiper"
import {getPopularNovel,getBookShelf,getEndBook,getChiefEditor,getAllBook,getFreeBook} from "../api/index"
export default {
    data(){
        return {
            value:null,
            imgs:[
                {
                    pic:"https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/c215f0441e4df66b2421954bb0e42704.jpg"
                },
                {
                    pic:"https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/4b59c747dca1e5a532696d1fd7b54052.jpg"
                },
                {
                    pic:"https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/a42decdfcf7c7dabaf74ecfcf5cff143.jpg"
                },
                {
                    pic:"https://bossaudioandcomic-1252317822.image.myqcloud.com/activity/document/83eb00cad4e6391210842ad2491e32f2.jpg"
                },
                {
                    pic:"https://img0.qidian.com/upload/gamesy/2021/12/01/20211201173549bufmhiom0k.jpg"
                }
            ],
            hotnovellist:null,
            firstgrade:null,
            firstgradelist:[],
            endbooklist:null,
            chiefeditorlist:null,
            newbooklist:null,
            updatebook:null,
            topsellinglist:null,
            topnewbook:null,
            freebook:null,
            hiefeditorlist:null,
        }
    },
    methods:{
        bookClick(id){
            this.$emit('get-book-id',id)
            // console.log('一品id',id)
            this.$router.push({name:'bookdetail',params:{ids:id}})
        }
    },
    created(){
        getPopularNovel().then(data=>{
            // console.log('热门小说',data)
            this.hotnovellist=data.data.list
            this.firstgrade=data.data.list
            for(var i=0;i<this.firstgrade.length;i++){
                getBookShelf({
                    id:this.firstgrade[i].id,
                    title:this.firstgrade[i].title
                }).then(data=>{
                    this.firstgradelist.push(data.feed)
                    // console.log('一品红文',data.feed.entry)
                    // console.log('一品红文2',data.feed.entry["pris:book"])
                })
            }
        })

        //获取主编推荐
        getChiefEditor().then(data=>{
            // console.log('主编推荐',data)
            this.hiefeditorlist=data.data.list[2].list
            this.newbooklist=data.data.list[9].list
            this.updatebook=data.data.list[3].list
        })


        //获取完本专区
        getEndBook().then(data=>{
            this.endbooklist=data.data.books
            // console.log('完本专区',data.data)
        })
        
        getAllBook().then(data=>{
            // console.log('所有',data)
            this.topsellinglist=data.data.list[10].list
            this.topnewbook=data.data.list[4].list
        })

        //获取免费小说
        getFreeBook().then(data=>{
            // console.log('免费',data)
            this.freebook=data.list
        })
        
    },
    components:{
        headerNar
    }
}
</script>



<style lang="less" scoped>
.content{
    background-color: white;
.banner{
    margin: auto;
    content: "";
    display: block;
    height: 136px;
    width: 100%px;
    .imgs{
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        margin: auto;
        width: 100%;
        overflow: hidden;
        img{
            width: 100%;
        }
    }
}

.search{
    width: 337px;
    height: 32px;
    margin: 6px auto;
    text-align: center;
    line-height: 32px;
    background-color: #F2F4F5;

}
.category{
    width: 100%;
    height: 82px;
    display: flex;
    justify-content: space-between;
    background-color: white;
    .iconts{
        width: 56px;
        height: 74px;
        margin: 13px 0px;
        font-size: 12px;
        text-align: center;
        .nav-icon{
            width: 48px;
            height: 48px;
            margin: 4px;
            img{
                width: 48px;
                height: 48px;
            }
        }
        
    }
}

.nav-book-hot-ol{
    width: 100%;
    height: 175px;
    border-top: 1px solid #eee;
    margin: auto;
    .nav-ol{
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        li{
            width: 187.5px;
            height: 80px;
            display: flex;
            img{
                width: 50px;
                height: 64px;
                margin: 15px;
            }
            .book-cell{
                margin-top: 15px;
                span{
                    font-size: 16px;
                    font-weight: bold;
                }
                p{
                    margin-top: 10px;
                    font-size: 14px;
                    color: #808080;
                }
            }
        }
    }
}


.model-header{
    width: 100%;
    height: 28px;
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    .model-left{
        width: 87px;
        height: 20px;
        margin-left: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .text{
            font-size: 16px;
            font-weight: bold;
        }

    }
    .model-right{
        margin-right: 16px;
        display: flex;
        .text{
            font-size: 12px;
            color: #808080;
        }
    }

}

.model-tips{
    width: 300px;
    height: 17px;
    line-height: 17px;
    padding-left: 16px;
    background-color: white;
    span{
        color:#808080;
        font-size: 0.75rem;
    }
}


.red-text{
    .book-ol{
        .book-li{
            background-color: white;
            .book-layout {
                display: block;
                padding: 1rem;
                position: relative;
                overflow: hidden;
                -webkit-transition: padding-left .15s;
                transition: padding-left .15s;
                .book-cover {
                    width: 4.125rem;
                    height: 5.5rem;
                    float: left;
                    margin-right: .5rem;
                    box-shadow: 0 4px 8px 0 rgba(51, 55, 61, 0.1);
                    border-radius: 2px;
                    font-size: 0;
                }
                .book-cell {
                    overflow: hidden;
                    .book-title {
                        line-height: 1.4;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        font-size: 0.875rem;
                    }
                    .book-desc {
                        line-height: 1.1875rem;
                        height: 2.25rem;
                        font-size: 0.75rem;
                        margin-bottom: .6rem;
                        color: #808080;
                        overflow: hidden;
                    }
                    .book-meta {
                        font-size: .75rem;
                        overflow: hidden;
                        .book-meta-l {
                            float: left;
                            .book-author {
                                display: block;
                                color: #808080;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                max-width: 10em;
                                max-width: calc(100vw - 2rem - (176rem / 16));
                                font-size: 0.75rem;
                                overflow: hidden;
                            }
                        }
                        .book-meta-r {
                            float: right;
                            position: relative;
                            top: 0.05rem;
                            .tag-small-group {
                                display: inline-block;
                                vertical-align: middle;
                                position: absolute;
                                top: 0.04rem;
                                right: 0;
                                white-space: nowrap;
                                .tag-small {
                                    display: inline-block;
                                    line-height: 10px;
                                    padding: 0.25em 0.25em;
                                    margin: 0 0.15em;
                                    font-size: 10px;
                                    transform: scale(1);
                                    vertical-align: bottom;
                                    border: 1px solid #F16299;
                                }
                                .lightgreen {
                                    color: #F16299;
                                }   
                                .lightblue {
                                    color: #F69A48;
                                }
                                .smallblue {
                                    color: #65B1F5;
                                }
                                p{
                                    font-size: 5px;
                                    font-style: normal;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.autor-moduel{
    width: 100%;
    height: 28px;
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    .model-left{
        width: 87px;
        height: 20px;
        margin-left: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .text{
            font-size: 16px;
            font-weight: bold;
        }

    }
    .model-right{
        margin-right: 16px;
        display: flex;
        .text{
            font-size: 12px;
            color: #808080;
        }
    }
}


.autor-model-recommend{
    width: 100%;
    height: 172px;
    background-color: white;
    ul{
        width: 343px;
        height: 172px;
        margin: auto;
        display: flex;
        justify-content: space-between;
        li{
            width: 82px;
            height: 172px;
            position: relative;
            img{
                width: 66px;
                height: 88px;
                margin-left: 8px;
                margin-top: 8px;
            }
            span{
                display: block;
                margin: 0.5rem 0.5rem;
                font-size: 0.8125rem;
                max-height: 2.125rem;
                line-height: 1.125rem;
                overflow: hidden;
                font-weight: bold;
            }
            p{  
                position: absolute;
                bottom: 8px;
                margin-left: 8px;
                font-size: .75rem;
                color: #808080;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }
    }
}

.rank-model{
    width: 100%;
    height: 28px;
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    .model-left{
        width: 71px;
        height: 20px;
        margin-left: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .text{
            font-size: 16px;
            font-weight: bold;
        }

    }
    .model-right{
        margin-right: 16px;
        display: flex;
        .text{
            font-size: 12px;
            color: #808080;
        }
    }
}

.module-rank-top{
    width: 100%;
    height: 25px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    .line{
        display: block;
        width: 35%;
        height: 1px;
        background-color: #93979D;
    }
    .text{
        color: #93979D;
        font-size: 12px;
        padding: 0px 10px;
    }
}

.sell-hot-rank{
    width: 100%;
    height: 172px;
    background-color: white;
    ul{
        width: 343px;
        height: 172px;
        margin: auto;
        display: flex;
        justify-content: space-between;
        li{
            width: 82px;
            height: 172px;
            position: relative;
            img{
                width: 66px;
                height: 88px;
                margin-left: 8px;
                margin-top: 8px;
            }
            span{
                display: block;
                margin: 0.5rem 0.5rem;
                font-size: 0.8125rem;
                max-height: 2.125rem;
                line-height: 1.125rem;
                overflow: hidden;
                font-weight: bold;
            }
            p{  
                position: absolute;
                bottom: 8px;
                margin-left: 8px;
                font-size: .75rem;
                color: #808080;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }
    }
}

.new-book-rank{
    width: 100%;
    height: 172px;
    background-color: white;
    ul{
        width: 343px;
        height: 172px;
        margin: auto;
        display: flex;
        justify-content: space-between;
        li{
            width: 82px;
            height: 172px;
            position: relative;
            img{
                width: 66px;
                height: 88px;
                margin-left: 8px;
                margin-top: 8px;
            }
            span{
                display: block;
                margin: 0.5rem 0.5rem;
                font-size: 0.8125rem;
                max-height: 2.125rem;
                line-height: 1.125rem;
                overflow: hidden;
                font-weight: bold;
            }
            p{  
                position: absolute;
                width: 66px;
                bottom: 8px;
                margin-left: 8px;
                font-size: .75rem;
                color: #808080;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }
    }
}

.other-rank{
    width: 343px;
    height: 40px;
    margin: auto;
    ul{
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-between;
        li{
            border: 1px solid red;
            width: 66px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }
    }
}

.free-read-model{
    width: 100%;
    height: 28px;
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    .model-left{
        width: 87px;
        height: 20px;
        margin-left: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .text{
            font-size: 16px;
            font-weight: bold;
        }

    }
    .model-right{
        margin-right: 16px;
        display: flex;
        .text{
            font-size: 12px;
            color: #808080;
        }
    }
}







}
</style>